<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>创建公告</title>
    <link rel="stylesheet" href="${rc.contextPath}/static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${rc.contextPath}/static/plugin/layer/skin/layer.css">
    <!--<link rel="stylesheet" href="${rc.contextPath}/static/css/x-admin.css" media="all">-->

    <style type="text/css">
        body{padding-top:10px;}
        .fl{float:left;}
        .fr{float:right;}
        .por{position: relative;}
        .clearfix:after{content:'';display:block;height:0;visibility:hidden;clear:both;}
        .clearfix{zoom:1;}
        #pagination{margin:0 20px;}
        .layui-form{margin:0 20px;}
        .update input{position: absolute;height:36px;width:100px;z-index:3;opacity: .01;cursor: pointer;}
        .update span{color:#5FB878;position: absolute;left:0;top:0;width: 110px;height:36px;text-align:center;line-height:36px;border:1px solid #ddd;border-bottom-right-radius: 2px;border-top-right-radius:2px;font-size:14px;}
        .update i{color:#000;font-style: normal;font-size:16px;}
        .layui-form-item .layui-input-inline{width:auto;}
        /*通知对象样式*/
        .box{height:28px;border:1px solid red;font-size:0;margin:5px;}
        .content{margin:5px;}
        .content select{width:100px;}
        .content select option.disabledBg{background:#ddd;}
        /* 选中的元素span被放到展示框里的样式 */
        .box span{font-size:12px;display:inline-block;border:1px solid #ddd;margin:3px;padding:2px;cursor:pointer;border-radius:2px;}
        .box span:hover{box-shadow: 0 0 10px #666;}
        .box span b{display: inline-block;height:12px;width:12px;text-align:center;line-height:12px;padding:0 2px;vertical-align:top;}
        .box span b img{width: 12px;height:12px;vertical-align:middle;}
        .checkbox{position: relative;width:100px;height:32px;padding-left:32px;}
        .checkbox input{position: absolute;left:0;top:0;width:50px;height:32px;opacity:.01;z-index:2;cursor:pointer;}
        .checkbox input:hover+i.checkboxIcon{border:1px solid #5FB878;}
        .checkbox i.checkedColor{color:#fff;border:1px solid #5FB878;background: #5FB878;}
        /*table td ,table th{border:1px solid #bbb;padding:0 5px;font-size:14px;}*/
        .checkbox i.checkboxIcon{position: absolute;width:22px;height:22px;line-height:22px;text-align:center; text-indent: -8px;border:1px solid #ddd;top:0;bottom:0;left:0;margin:auto;z-index:1;font-size:16px;color:#ddd;}
        #layui-layer1{top:50px !important;}
        /*上传按钮样式*/
        .layui-upload-button{min-width:110px;background-color:rgba(255,255,255,0);color:#fff;}
        .layui-upload-button:hover {background-color:rgba(255,255,255,0);color:#fff;}
        .layui-upload-button input:hover {background-color:rgba(255,255,255,0);color:#fff;cursor:pointer;}
        .layui-upload-icon{margin:0;font-size:14px;}
        .layui-upload-icon i{color:#5FB878;}

        /*通知对象*/
        .receive {padding:2px 5px;margin:0 10px 0 0;line-height: 48px;border:1px solid #ddd;width:158px;float:left;}
        .receive li{line-height:32px;box-sizing: border-box;width:150px;}
        .receive li input{width:150px;}
        .receive li.allChose input{width:32px;}
        /*图标字体旋转*/
        .downTriangle{transition:all 0.5s;}
        .downTriangle.downRotate{transform: rotate(90deg);}
        /*上传文件的input的样式*/
        .layui-upload-button{margin-left:14px;margin-right:5px;}
        .layui-upload-button span{color:#5FB878;}
        .x-red{
            color: red;
        }
    </style>
</head>
<body>
<div id="createApp">
<div>
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>通知</legend>
    </fieldset>
<form>
    <input type="hidden" name="id" id="id" v-model="parameter.id"   autocomplete="off" class="layui-input">
    <input type="hidden" name="status" id="status" v-model="parameter.status"   autocomplete="off" class="layui-input">
    <input type="hidden" name="createTime" id="createTime" v-model="parameter.createTime"   autocomplete="off" class="layui-input">
    <input type="hidden" name="updateTime" id="updateTime" v-model="parameter.updateTime"   autocomplete="off" class="layui-input">
    <input type="hidden" name="imageShow" id="imageShow" v-model="parameter.imageShow"   autocomplete="off" class="layui-input">
    <input type="hidden" name="createUser" id="createUser" v-model="parameter.createUser"   autocomplete="off" class="layui-input">
    <input type="hidden" name="updateUser" id="updateUser" v-model="parameter.updateUser"   autocomplete="off" class="layui-input">
  <div class="layui-form-item">
    <label class="layui-form-label">发布人</label>
    <div class="layui-input-inline" >
      <input type="text" name="publish"  v-model="parameter.publish" autocomplete="off" class="layui-input" disabled="">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">公告标题</label>
    <div class="layui-input-inline">
      <input type="text" name="title" :value="parameter.title" v-model="parameter.title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
      <div class="layui-form-mid layui-word-aux layui-input-inline">
          <span class="x-red" style="font-size: 14px;">*必填</span>
      </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">公告内容</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容"  name="content" v-model="parameter.content" class="layui-textarea"  style="width: 600px;height: 200px;display:inline-block;float: left;margin-right:10px;"></textarea>
    <div class="layui-form-mid layui-word-aux layui-input-inline" style="margin-top:82px;float: left;font-size:12px;">
        <span class="x-red" style="font-size: 14px;">*必填</span>
    </div>
    </div>

  </div>

    <div class="layui-form-item">
        <label class="layui-form-label">公告附件</label>
        <div class="site-demo-upload por">
            <img id="LAY_demo_upload"  :src='imgSrc' style="width: 200px;height:200px;border-radius:50%;">
            <input type="hidden" id="attachMent" name="sysFileEntity" > <!--v-model="parameter.attachMent"-->
            <div class="site-demo-upbar" style="position: absolute;left:142px;bottom:20px;">
                <input type="file" name="file" lay-type="file" class="layui-upload-file" id="fileUpload"  >
            </div>

            <!--<input type="file" name="file1" lay-type="file" class="layui-upload-file fc">-->
            <!--<input type="file" name="file1" lay-type="audio" class="layui-upload-file fc">-->
            <!--<input type="file" name="file2" lay-type="video" class="layui-upload-file fc">-->
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">范围选择</label>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="开始日" name="validTime1" value="$!{notice.validTime1}" id="LAY_demorange_s" >
        </div>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="截止日"  name="validTime2" value="$!{notice.validTime2}" id="LAY_demorange_e" >
        </div>
    </div>

    <div class="layui-form-item clearfix" >
        <label class="layui-form-label">通知对象</label>
        <ul class="receive"  v-for="item in notiveLists.list" >
            <li class="por allChose checkbox">
                <input class="" @click="allDept(item)" :checked="item.allChoseFlag"  type="checkbox" name="like1[write]" lay-filter="allChoose" :value="'all'" v-model="delMultiFlag">
                <i class="layui-icon checkboxIcon" :class="{'checkedColor':item.allChoseFlag}">&#xe618;</i>
                <span @click="downShow(item)" style="cursor:pointer;">{{item.deptName}}
                    <i class="layui-icon downTriangle" :class="{'downRotate':item.subItemShowFlag}" style="float:right;font-size:20px;" >&#xe623;</i>
                </span>
            </li>
            <li class="checkbox" v-for="subItem in item.departmentList" v-if="item.subItemShowFlag">
                <input type="checkbox"  name="receiveObject1" :value="subItem.deptName" v-model="receiveObject1" name="receiveObject1" @click="selectDep(subItem)" :checked="item.allChoseFlag">
                <i class="layui-icon checkboxIcon"  :class="{'checkedColor':subItem.checked}">&#xe618;</i>
                {{subItem.deptName}}
            </li>
        </ul>
        <div class="layui-form-mid layui-word-aux layui-input-inline">
            <span class="x-red" style="font-size: 14px;">*必填</span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公告排序</label>
        <div class="layui-input-inline">
            <input type="text" name="title" v-model="parameter.order" lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
        </div>
        <!--<div class="layui-form-mid layui-word-aux layui-input-inline">-->
            <!--<span class="x-red">(必填数字*)</span>-->
        <!--</div>-->
    </div>
</form>
    <div class="layui-form-item">
        <label  class="layui-form-label"></label><button class="layui-btn "  lay-filter="demo2" @click="sub">提交</button>
    </div>
</div>
</div>
<script src="${rc.contextPath}/static/lib/jquery.min.js"></script>
<script src="${rc.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="${rc.contextPath}/static/lib/vue.min.js"></script>
<script src="${rc.contextPath}/static/lib/x-layui.js"></script>

<script type="text/javascript">
    var myid="$!{notice.id}";
    var obj = '$!{notice.receiveObject}';
    console.log(obj);
    if(myid==""){
        var kid=""
    }else {
        kid="$!{notice.id}"
    }
    var VM = new Vue({
        el:"#createApp",
        created:function(){
            this.getNotiveLists();
        },
        data:{
            rotateFlag:true,
            notiveLists:{},
            parameter:{
                id:kid,
                publish:'$!{notice.publish}',
                title:'$!{notice.title}',
                content:'$!{notice.content}',
                attachMent:'$!{notice.attachMent}',/*$!{notice.attachMent}*/
                validTime1:'$!{notice.validTime1}',
                validTime2:'$!{notice.validTime2}',
                receiveObject:'$!{notice.receiveObject}',
                status:'$!{notice.status}',
                createTime:'$!{notice.createTime}',
                updateTime:'$!{notice.updateTime}',
                createUser:'$!{notice.createUser}',
                updateUser:'$!{notice.updateUser}',
                order:'$!{notice.order}',
                imageShow:'$!{notice.imageShow}'
            },
            receiveObject1:[],
            imgSrc:"",
            delMultiFlag:[]
        },
        methods:{
            getNotiveLists:function(){
                var _this = this;
                if(this.parameter.imageShow){
                    this.imgSrc = 'http://182.254.136.235.:81/uploads/'+this.parameter.imageShow;
                }else{
                    this.imgSrc = "${rc.contextPath}/static/images/timg.jpg";
                }
                $.ajax({
                    type:"post",
                    url:'${rc.contextPath}/notice/getInitInfo.do',
                    dataType:"json",
                    success:function(res){
                        _this.notiveLists = res.result;
                        console.log(_this.notiveLists);
                        _this.parameter.publish = _this.notiveLists.username;
                        if(_this.parameter.receiveObject){_this.receiveObject1 = _this.parameter.receiveObject.split(",");}

                        console.log(_this.parameter.receiveObject);
                        _this.notiveLists.list.forEach(function(item,index){
                            console.log(item);
                            item.departmentList.forEach(function(dept,deptIndex){
                                _this.receiveObject1.forEach(function(value1,index1){
//
                                    if(dept.deptName == value1){
                                        console.log("相同");
                                        if(typeof dept.checked == "undefined"){
                                            Vue.set(dept,"checked",true);
                                        }else{
                                            dept.checked = !dept.checked;
                                        }
                                    }
                                });
                            });

                        });
                    }
                })
            },
            selectDep:function (item) {
//                if(typeof item.checked == "undefined"){
//                    Vue.set(item,"checked",true);
//                }else{
//                    item.checked = !item.checked;
//                }
//                this.parameter.receiveObject = this.receiveObject1.join(",");
//                console.log(this.receiveObject1);
//                console.log(this.parameter.receiveObject);
            },
            sub:function(){
                var _this = this;
                _this.receiveObject1 = [];

                this.notiveLists.list.forEach(function(item,index){
                    item.departmentList.forEach(function(v,i){
                        if(v.checked == true){
                            _this.receiveObject1.push(v.deptName);
                        }
                    });
                })
                console.log(_this.receiveObject1);
                this.parameter.receiveObject = _this.receiveObject1.join(",");
                console.log(_this.parameter.receiveObject);
                if(this.parameter.title == "" ){
                    layer.msg("请输入公告标题！", {icon: 1});
                    return false;
                }else if(this.parameter.content == ""){
                    layer.msg("请输入公告内容！", {icon: 1});
                    return false;
                }
                else if(this.parameter.receiveObject == ""){
                    layer.msg("请选择通知对象！", {icon: 1});
                    return false;
                }

                //判断公告排序输入的是否是数字
                var num = this.parameter.order;
                if( isNaN( num ) ){
                    layer.msg("您输入的公告排序必须是数字！", {icon: 2});
                    return false;
                }


//                this.parameter.validTime1 = $(LAY_demorange_s).val();
//                this.parameter.validTime2 = $(LAY_demorange_e).val();

                this.parameter.validTime1 = $("#LAY_demorange_s").val();
                this.parameter.validTime2 = $("#LAY_demorange_e").val();
//                this.parameter.attachMent = $("#LAY_demorange_e").val();
                var nn = VM.parameter.attachMent;
                //提交接口
                $.ajax({
                    type:"post",
                    url:'${rc.contextPath}/notice/saveOrUpdate.do',
                    data:_this.parameter,
                    dataType:"json",
                    success:function(data){
                        //关闭窗口
                        layer.msg("操作成功", {icon: 0});
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.window.location.reload();
                        window.location.href = "javascript:location.replace(location.href)";

                    }
                })
            },
            selectDep:function(item){
                if(typeof item.checked == "undefined"){
                    Vue.set(item,"checked",true);
                }else{
                    item.checked = !item.checked;
                }
            },
            allDept:function(item){
                var _this = this;


                //选中一级部门
                if(typeof item.allChoseFlag == "undefined"){
                    Vue.set(item,"allChoseFlag",true);
                    this.notiveLists.list.forEach(function(value,index){
                        if(item.allChoseFlag && item.id == value.id){
                            value.departmentList.forEach(function(v,i){
                                //选中二级部门
                                if(typeof v.checked == "undefined"){
                                    Vue.set(v,"checked",true);
                                }
                            });
                        }
                    });
                }else{
                    item.allChoseFlag = !item.allChoseFlag;
                    Vue.delete(item,"allChoseFlag",true);
                    this.notiveLists.list.forEach(function(value,index){
                        if(item.id == value.id){
                            value.departmentList.forEach(function(v,i){
                                v.checked = !v.checked;
                                Vue.delete(v,"checked",true);
                            });
                        }
                    });
                }
            },
            downShow:function(item){
                if(typeof item.subItemShowFlag == "undefined") {
                    Vue.set(item, "subItemShowFlag", true);
                }else{
                    item.subItemShowFlag = !item.subItemShowFlag;
                }
            }
        }
    });//vue 实例结束




    layui.use(['layer',"form",'laydate','upload'], function(){
        var _this = this;
        var form = layui.form(),
            layer = layui.layer,
            laydate = layui.laydate;
        var pathStr = '';
        var imgStr='';
        layui.upload({
            url: '${rc.contextPath}/multipart-file/upload.do'
            ,elem: '' //指定原始元素，默认直接查找class="layui-upload-file"
            ,success: function(res){
//                var paths = res.result.path;
                var paths = res.result.url;
                pathStr += paths+",";
                var aa=res.result.url.split('.');
                if(/\.(gif|jpg|jpeg|png|bmp|tiff|GIF|JPG|JPEG|PNG|BMP|TIFF)$/.test(res.result.url)){
                    imgStr=res.result.url;
                }
                VM.parameter.imageShow=imgStr;
                VM.parameter.attachMent = pathStr;
                console.log(VM.parameter.attachMent);
                if(imgStr){
                    $("#LAY_demo_upload").attr('src','http://182.254.136.235.:81/uploads/'+imgStr);
                }else{
                    $("#LAY_demo_upload").attr('src',"${rc.contextPath}/static/images/timg.jpg");
                }

                layer.msg("上传成功！", {icon: 0});
            }
        });
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input.checkbox');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
        var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
        }

    });
</script>
</body>
</html>